<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>恋爱倒计时</title>
    <style>
        h1 {
            width: 250px;
            margin: 100px auto 50px auto;
        }

        .item {
            width: 500px;
            height: 50px;
            margin: 0 auto;
            text-align: center;
            font-size: 30px;
            color: orange;
        }

        strong {
            background-color: orange;
            padding: 0 10px;
            color: #fff;
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <h1>距离恋爱一千天,还有</h1>
    <div class="item">
        <span><span class="day">00</span>天</span>
        <strong><span class="hour">00</span>时</strong>
        <strong><span class="min">00</span>分</strong>
        <strong><span class="second">00</span>秒</strong>
    </div>
    <script>
        alert("段铭锟和王娟的恋爱倒计时！");
        alert("亲爱的乖!");
        alert("爱你呀");
        alert("恋爱一千天，珍惜到永远！");
        var endTime = new Date("2021-4-2");
        var dayel = document.querySelector(".day");
        var hourel = document.querySelector(".hour");
        var minel = document.querySelector(".min");
        var secondel = document.querySelector(".second");


        //计算
        setInterval(
            function () {
                // 获取现在的时间
                var nowTime = new Date();
                // 相差的时间
                var stamp = endTime - nowTime;
                // console.log(stamp);
                var day_ms = 24 * 60 * 60 * 1000;
                var hour_ms = 60 * 60 * 1000;
                var min_ms = 60 * 1000;
                var day = Math.floor(stamp / day_ms);
                var hour = Math.floor((stamp % day_ms) / hour_ms);
                var min = Math.floor((stamp % hour_ms) / min_ms);
                var s = Math.floor((stamp % min_ms) / 1000);

                // console.log(day,hour,min,s);
                dayel.innerText = wrap(day);
                hourel.innerText = wrap(hour);
                minel.innerText = wrap(min);
                secondel.innerText = wrap(s);
            }, 1000);

        function wrap(n) {
            return n>=10?n:"0"+n;
        }
    </script>

</body>

</html>